<template>
  <view class="apply-list">
    <view v-if="token">
		<nav-bar :total="total"></nav-bar>
		<view class="mui-tab">
		  <view
		    @click="onClickItem(0)"
		    class="mui-item"
		    :class="{ active: current === 0 }"
		    >待我处理</view
		  >
		  <view
		    @click="onClickItem(1)"
		    class="mui-item"
		    :class="{ active: current === 1 }"
		    >我的申请</view
		  >
		</view>
		<!-- <view class="search">
		  <input
		    class="form-control"
		    type="text"
		    placeholder="搜索"
		    v-model="searchValue"
		    confirm-type="search"
		    @confirm="confirm"
		  />
		  <icon type="search" size="14" class="search-icon" />
		</view> -->
		<view class="" style="height: 30rpx;"></view>
		<apply-item
		  :applyItem="item"
		  :current="current"
		  v-for="(item, index) in list"
		  :key="index"
		  @handle-approval="handleApply"
		></apply-item>
		<view v-if="!list.length" class="empty">暂无数据</view>
		<view class="watchGengxin" @click="goGengxin">
			<view>查 看</view>
			<view>更 新</view>
		</view>
	</view>
	<view v-else>请使用企业微信登录</view>
  </view>
</template>

<script>
import ApplyItem from "./components/ApplyItem";
import NavBar from "./components/NavBar";

export default {
  name: "apply-list",
  components: {
    ApplyItem,
    NavBar,
  },
  data() {
    return {
		token:'1',
      current: 0,
      total: 0,
      searchValue: "",
      dealWithList: [],
      myApplyList: [],
      pageNum: 1,
      pageSize: 10,
    };
  },
  computed: {
    list() {
      if (this.current === 0) {
        return this.dealWithList;
      } else if (this.current === 1) {
        return this.myApplyList;
      }
    },
  },
  onLoad() {
	var n=window.location.search
	var t=n.split("=");
	console.log(n)
	uni.setStorageSync("token",t[1])
	this.token = t[1]
	if(t[1]){
		uni.setNavigationBarTitle({
			title:'中国烟草'
		})
		this.refresh()
	} else {
		uni.setNavigationBarTitle({
			title:'提示'
		})
	}
    
  },
  onShow(){
	  // 审核页面返回刷新列表
	if(uni.getStorageSync('shenhe')){
		uni.removeStorageSync('shenhe')
		this.refresh()
	}
	let params = {
	  pageNum: this.pageNum,
	  pageSize: this.pageSize,
	};
	if(this.token){
		this.$http
		  .get("/flowable/task/myProcess", params)
		  .then((res) => {
		    this.total = res.total;
		  })
		  .catch((errorData) => {
					
		  });
	}
	  
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.current === 0) {
      this.getDealWithList();
    } else if (this.current === 1) {
      this.getMyApplyList();
    }
  },
  methods: {
	  goGengxin(){
		uni.navigateTo({
			url:'/pages/gengxin/gengxin'
		})  
	  },
    // 审批和拒绝
    handleApply(val) {
      this.$emit("handle-approval", val.approvalStatus);
      let text = val.approvalStatus === 1 ? "通过" : "拒绝";
      uni.showModal({
        title: "提示",
        content: `是否${text}派车申请？`,
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post(
                `/process/completeApply?taskId=${val.taskId}&approvalStatus=${val.approvalStatus}`
              )
              .then(() => {
                uni.showToast({
                  title: "操作成功",
                });
                this.pageNum = 1;
                this.dealWithList = [];
                this.getDealWithList();
              })
              .catch((errorData) => {
                uni.showToast({
                  title: "操作失败",
                });
                console.log(errorData);
              });
          }
        },
      });
    },
    // 搜索
    confirm(e) {
      this.searchValue = e.detail.value;
      this.refresh();
    },
    // 选项卡切换
    onClickItem(current) {
      this.current = current;
	  this.refresh();
    },
    // 刷新
    refresh() {
      this.pageNum = 1;
      if (this.current === 0) {
        this.dealWithList = [];
        this.getDealWithList();
      } else if (this.current === 1) {
        this.myApplyList = [];
        this.getMyApplyList();
      }
    },
    // 获取待我处理列表
    getDealWithList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.searchValue) {
        params.personnel = this.searchValue;
      }
      this.$http
        .get("/flowable/task/todoList", params)
        .then((res) => {
          let list = res.data.records;
          this.dealWithList = this.dealWithList.concat(list);
          this.pageNum++;
          uni.stopPullDownRefresh();
        })
        .catch((errorData) => {
          console.log(errorData);
          uni.stopPullDownRefresh();
        });
    },
    // 获取我的申请列表
    getMyApplyList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.searchValue) {
        params.personnel = this.searchValue;
      }
      this.$http
        .get("/flowable/task/myProcess", params)
        .then((res) => {
          let list = res.data.records;
          this.myApplyList = this.myApplyList.concat(list);
          this.pageNum++;
          this.total = res.total;
          uni.stopPullDownRefresh();
        })
        .catch((errorData) => {
          console.log(errorData);
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>

<style lang="scss">
.apply-list {
  .mui-tab {
    display: flex;
    justify-content: space-around;
    height: 60px;
    line-height: 60px;
    background: #fff;
  }

  .active {
    color: #0984f8;
    font-weight: bold;
    border-bottom: 4px solid #0984f8;
  }

  .mui-item {
    width: 50%;
    text-align: center;
  }

  .search {
    padding: 10px;
    position: relative;
  }

  .search-icon {
    position: absolute;
    left: 20px;
    top: 18px;
  }

  .form-control {
    height: 30px;
    border-radius: 10px;
    padding: 0 10px 0 30px;
    background-color: #fff;
    font-size: 24upx;
  }
}
.empty {
  margin-top: 200px;
  text-align: center;
}
.watchGengxin{
	background: #1ca480;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	box-shadow:  4rpx 4rpx 16rpx -8rpx rgba(0,0,0,.7);
	position: fixed;
	right: 30rpx;
	bottom: 60rpx;
	width: 120rpx;
	height: 120rpx;
}
.watchGengxin view{
	color: white;
	line-height: 40rpx;
	font-size: 28rpx;
}
</style>
